<!DOCTYPE HTML>
<!--
     Any copyright is dedicated to the Public Domain.
     http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
  <meta charset="utf-8">
  <title>CSS Test: Testing definite placement with non-existent line names</title>
  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1146051">
  <style type="text/css">
html,body {
  font-size: 16px;
  font-family: monospace;
  padding:0; margin:0;
}

.grid {
  height: 40px;
  position: relative;
}

span {
  position: absolute;
  top:0; left:0; width:20px; height:20px;
  background: lime;
  border: 1px solid black;
  box-sizing: border-box;
}

.XeN   { left: 20px; width: 80px; }
.XsN   { width: 80px; }              .XsN ~ span { top:20px; left:60px; }
.NeX   { left: 20px; width: 80px; }
.NsX   { width: 80px; }              .NsX  ~ span { left: 60px; top: 20px; }
.XeA   { width: 100px; }             .XeA  ~ span { top: 20px; }
.XsA   { width: 60px; }              .XsA  ~ span { left: 60px; }
.XsA2  { width: 80px; }              .XsA2 ~ span { left: 60px; top: 20px; }
.XsA3  { width: 120px; }             .XsA3 ~ span { left: 60px; top: 20px; }
.AsX   { width: 60px;}               .AsX  ~ span { left: 60px; }
.xsN   { }                           .xsN  ~ span { left: 20px; }
.x2sN  { width: 40px; }              .x2sN ~ span { left: 40px; }
.xsN2  { width: 40px; }              .xsN2 ~ span { left: 20px; top: 20px; }
.xXs   { }                           .xXs  ~ span { left: 60px;}
.aXs   { }                           .aXs  ~ span { left: 60px;}
.aXe   { left: 20px; width: 60px; }
.xXe   { width: 100px; }             .xXe  ~ span { left: 20px; top: 20px; }

.AXe   { width: 80px; }              .AXe  ~ span { top: 20px; }
.A2Xe  { left: 20px; width: 60px; }
.XXe   { left: 60px; }
.XX3e  { left: 60px; width: 40px; }
.XbXe  { width: 100px; }             .XbXe ~ span  { top: 20px; left: 40px; }
.XX0b  { }                           .XX0b ~ span  { left: 60px; }
.XX1b  { }                           .XX1b ~ span  { left: 60px; }
.XX2b  { width: 40px; }              .XX2b ~ span  { left: 60px; }
.XbN1  { width: 60px; }              .XbN1 ~ span  { left: 60px; }
.XbN2  { width: 80px; }              .XbN2 ~ span  { top: 20px; left: 60px; }
.Xbb   { }                           .Xbb  ~ span  { left: 80px; }
.Xee   { left: 60px; width:40px; }
.nX2s  { width: 40px; }              .nX2s ~ span  { left: 80px; }
.nXs   { width: 40px; }              .nXs  ~ span  { left: 60px; }
.nXe   { left: 20px; width: 40px; }
.nX2e  { left: 40px; width: 40px; }

.nX3e  { left: 60px; width: 40px; }
.n3Xe  { width: 60px; }              .n3Xe ~ span  { top: 20px; }
.n4Xe  { width: 80px; }              .n4Xe ~ span  { top: 20px; left: 20px; }
.Xen3  { left: 60px; width: 60px; }
.Xea   { left: 60px;  }
.Xea2  { left: 60px; width: 40px; }
.Xea3  { left: 60px; width: 60px; }
.Xsa   { }                           .Xsa   ~ span  { left: 20px; }
.Xsa2  { width: 40px;   }            .Xsa2  ~ span  { left: 20px; top: 20px; }
.Xsa4  { width: 100px;  }            .Xsa4  ~ span  { left: 20px; top: 20px; }
.Xs2a  { width: 40px;   }            .Xs2a  ~ span  { left: 40px; }
.Xs2a2 { width: 60px;   }            .Xs2a2 ~ span  { left: 40px; top: 20px; }
.Xs2a4 { width: 120px;  }            .Xs2a4 ~ span  { left: 40px; top: 20px; }
.Xs3a  { width: 60px;   }            .Xs3a  ~ span  { left: 60px; }
.Xs3a2 { width: 80px;   }            .Xs3a2 ~ span  { left: 60px; top: 20px; }
.Xs3a4 { width: 140px;  }            .Xs3a4 ~ span  { left: 60px; top: 20px; }

.nxe   { width: 60px;   }            .nxe   ~ span  { top: 20px; }
.nx3e  { width: 100px;  }            .nx3e  ~ span  { top: 20px; }
.n2x3e { left: 20px; width: 80px; }
.Axe   { width: 60px;   }            .Axe   ~ span  { top: 20px; }
.A2xe  { left: 20px; width: 40px; }
.Ax3e  { width: 100px;  }            .Ax3e  ~ span  { top: 20px; }
.A2x3e { left: 20px; width: 80px; }
.Aa    { }                           .Aa    ~ span  { top: 20px; }
.A2a   { left: 20px; width: 40px; }
.Aa3   { width: 80px;   }            .Aa3   ~ span  { top: 20px; }
.AXs   { width: 40px; }              .AXs   ~ span  { left:40px; }
.A2Xs  { width: 60px; }              .A2Xs  ~ span  { left: 40px; top:20px; }
._Xs   { }                           ._Xs   ~ span  { left: 60px; }
._Xe   { left: 60px; }
._xe   { }                           ._xe   ~ span  { top: 20px; }
._x3e  { }                           ._x3e  ~ span  { top: 20px; }

._xa   { }                           ._xa   ~ span  { top: 20px; }
._xa3  { }                           ._xa3  ~ span  { top: 20px; }
._xn3  { width: 60px;   }            ._xn3  ~ span  { top: 20px; }
._xn5  { width: 100px;  }            ._xn5  ~ span  { top: 20px; }
.Xs_   { }                           .Xs_   ~ span  { left: 20px; }
.X2s_  { }                           .X2s_  ~ span  { left: 40px; }
.X2e_  { left: 80px; }
.A_    { }                           .A_    ~ span  { top: 20px; }
.A2_   { left: 20px; }
.x3_   { }                           .x3_   ~ span  { top: 20px; }
.a2_   { }                           .a2_   ~ span  { top: 20px; }
.a-2_  { }                           .a-2_  ~ span  { top: 20px; }
._n    { }                           ._n    ~ span  { left: 20px; }
._n2   { }                           ._n2   ~ span  { top: 20px; }
.A3Xe  { left: 60px; }
.asA   { }                           .asA   ~ span  { left: 20px; }
.asA2  { }                           .asA2  ~ span  { top: 20px; }
.a2sA2 { width: 40px; }              .a2sA2 ~ span  { left: 20px; top: 20px; }
.as1   { }                           .as1   ~ span  { left: 20px; }
.as2   { }                           .as2   ~ span  { top: 20px; }
.as3   { left: 20px; }

.c1 { background:grey; }

    </style>
</head>
<body>


<div style="float:left; width:140px">
<div class="grid"><span class="XeN" ></span><span class="c1"></span></div>
<div class="grid"><span class="XsN" ></span><span class="c1"></span></div>
<div class="grid"><span class="NeX" ></span><span class="c1"></span></div>
<div class="grid"><span class="NsX" ></span><span class="c1"></span></div>
<div class="grid"><span class="XeA" ></span><span class="c1"></span></div>
<div class="grid"><span class="XsA" ></span><span class="c1"></span></div>
<div class="grid"><span class="XsA2"></span><span class="c1"></span></div>
<div class="grid"><span class="XsA3"></span><span class="c1"></span></div>
<div class="grid"><span class="AsX" ></span><span class="c1"></span></div>
<div class="grid"><span class="xsN" ></span><span class="c1"></span></div>
<div class="grid"><span class="x2sN"></span><span class="c1"></span></div>
<div class="grid"><span class="xsN2"></span><span class="c1"></span></div>
<div class="grid"><span class="xXs" ></span><span class="c1"></span></div>
<div class="grid"><span class="aXs" ></span><span class="c1"></span></div>
<div class="grid"><span class="aXe" ></span><span class="c1"></span></div>
<div class="grid"><span class="xXe" ></span><span class="c1"></span></div>
</div>

<div style="float:left; width:140px">
<div class="grid"><span class="AXe" ></span><span class="c1"></span></div>
<div class="grid"><span class="A2Xe"></span><span class="c1"></span></div>
<div class="grid"><span class="XXe" ></span><span class="c1"></span></div>
<div class="grid"><span class="XX3e"></span><span class="c1"></span></div>
<div class="grid"><span class="XbXe"></span><span class="c1"></span></div>
<div class="grid"><span class="XX0b"></span><span class="c1"></span></div>
<div class="grid"><span class="XX1b"></span><span class="c1"></span></div>
<div class="grid"><span class="XX2b"></span><span class="c1"></span></div>
<div class="grid"><span class="XbN1"></span><span class="c1"></span></div>
<div class="grid"><span class="XbN2"></span><span class="c1"></span></div>
<div class="grid"><span class="Xbb" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xee" ></span><span class="c1"></span></div>
<div class="grid"><span class="nX2s"></span><span class="c1"></span></div>
<div class="grid"><span class="nXs" ></span><span class="c1"></span></div>
<div class="grid"><span class="nXe" ></span><span class="c1"></span></div>
<div class="grid"><span class="nX2e"></span><span class="c1"></span></div>
</div>

<div style="float:left; width:140px">
<div class="grid"><span class="nX3e" ></span><span class="c1"></span></div>
<div class="grid"><span class="n3Xe" ></span><span class="c1"></span></div>
<div class="grid"><span class="n4Xe" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xen3" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xea"  ></span><span class="c1"></span></div>
<div class="grid"><span class="Xea2" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xea3" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xsa"  ></span><span class="c1"></span></div>
<div class="grid"><span class="Xsa2" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xsa4" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xs2a" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xs2a2"></span><span class="c1"></span></div>
<div class="grid"><span class="Xs2a4"></span><span class="c1"></span></div>
<div class="grid"><span class="Xs3a" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xs3a2"></span><span class="c1"></span></div>
<div class="grid"><span class="Xs3a4"></span><span class="c1"></span></div>
</div>

<div style="float:left; width:140px">
<div class="grid"><span class="nxe"  ></span><span class="c1"></span></div>
<div class="grid"><span class="nx3e" ></span><span class="c1"></span></div>
<div class="grid"><span class="n2x3e"></span><span class="c1"></span></div>
<div class="grid"><span class="Axe"  ></span><span class="c1"></span></div>
<div class="grid"><span class="A2xe" ></span><span class="c1"></span></div>
<div class="grid"><span class="Ax3e" ></span><span class="c1"></span></div>
<div class="grid"><span class="A2x3e"></span><span class="c1"></span></div>
<div class="grid"><span class="Aa"   ></span><span class="c1"></span></div>
<div class="grid"><span class="A2a"  ></span><span class="c1"></span></div>
<div class="grid"><span class="Aa3"  ></span><span class="c1"></span></div>
<div class="grid"><span class="AXs"  ></span><span class="c1"></span></div>
<div class="grid"><span class="A2Xs" ></span><span class="c1"></span></div>
<div class="grid"><span class="_Xs"  ></span><span class="c1"></span></div>
<div class="grid"><span class="_Xe"  ></span><span class="c1"></span></div>
<div class="grid"><span class="_xe"  ></span><span class="c1"></span></div>
<div class="grid"><span class="_x3e" ></span><span class="c1"></span></div>
</div>

<div style="float:left; width:140px">
<div class="grid"><span class="_xa" ></span><span class="c1"></span></div>
<div class="grid"><span class="_xa3"></span><span class="c1"></span></div>
<div class="grid"><span class="_xn3"></span><span class="c1"></span></div>
<div class="grid"><span class="_xn5"></span><span class="c1"></span></div>
<div class="grid"><span class="Xs_" ></span><span class="c1"></span></div>
<div class="grid"><span class="X2s_"></span><span class="c1"></span></div>
<div class="grid"><span class="X2e_"></span><span class="c1"></span></div>
<div class="grid"><span class="A_"  ></span><span class="c1"></span></div>
<div class="grid"><span class="A2_" ></span><span class="c1"></span></div>
<div class="grid"><span class="x3_" ></span><span class="c1"></span></div>
<div class="grid"><span class="a2_" ></span><span class="c1"></span></div>
<div class="grid"><span class="a-2_"></span><span class="c1"></span></div>
<div class="grid"><span class="_n"  ></span><span class="c1"></span></div>
<div class="grid"><span class="_n2" ></span><span class="c1"></span></div>
<div class="grid"><span class="A3Xe"></span><span class="c1"></span></div>
<div class="grid"><span class="asA"></span><span class="c1"></span></div>
</div>

<div style="float:left; width:140px; clear:both">
<div class="grid"><span class="asA2"></span><span class="c1"></span></div>
<div class="grid"><span class="a2sA2"></span><span class="c1"></span></div>
<div class="grid"><span class="as1"></span><span class="c1"></span></div>
<div class="grid"><span class="as2"></span><span class="c1"></span></div>
<div class="grid"><span class="as3"></span><span class="c1"></span></div>
</div>

</body>
</html>
